<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-26 17:23:56
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-05-28 10:54:58
 * @FilePath: \nien-vue3-admin\src\views\index\components\FastApp.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <card
    title="快捷应用"
    :show-edit="true"
    style="margin-left: 10px;"
    @showEditApp="showEditApp"
  >
    <div class="quiceApp">
      <div
        v-for="(meta, index) in appList"
        :key="index"
        class="quiceAppItem"
        @click="jumpPath(meta.path)"
      >
        <div class="quiceAppSingle">
          <svg-icon :name="meta.icon"></svg-icon>
          <span>{{ meta.title }}</span>
        </div>
      </div>
    </div>
  </card>
  <el-dialog
    v-model="dialogVisible"
    width="60%"
  >
    <div class="add">已选择</div>
    <div class="metaCard">
      <el-card 
        v-for="(noMeta, index) in metaTitleTop" 
        :key="index"
        :body-style="{ width: '300px' }"
        style="height: 50px; line-height: 20px; text-align: center; cursor: pointer;"
        class="metaItem"
        @click="handleSelect(noMeta)"
      >
        <svg-icon :name="noMeta.icon"></svg-icon>
        <span style="margin-left: 10px;">{{ noMeta.title }}</span>
      </el-card>
    </div>
    <div class="add">未选择</div>
    <el-scrollbar style="height:500px">
      <div class="metaCard">
        <el-card 
          v-for="(meta, index) in metaTitleList" 
          :key="index"
          :body-style="{ width: '300px' }"
          style="height: 50px; line-height: 20px; text-align: center; cursor: pointer;"
          class="metaItem"
          @click="toggleMeta(meta)"
        >
          <svg-icon :name="meta.icon"></svg-icon>
          <span style="margin-left: 10px;">{{ meta.title }}</span>
        </el-card>
      </div>
    </el-scrollbar>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button v-model="metaLoading" type="primary" @click="handleCase">确 定</el-button>
    </template>
    <!-- <div slot="footer" class="dialog-footer">
    </div> -->
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import card from './card.vue'
import { add, updateByUserId, queryByUserId } from '@/api/home'
import useUserStore from '@/store/modules/user'
import useRouterStore from '@/store/modules/router'

const userStore = useUserStore()
const routerStore = useRouterStore()
const router = useRouter()
const appList = ref([])

const dialogVisible = ref(false)
const metaTitleTop = ref([])
const metaTitle = ref([])
const metaLoading = ref(false)
const isUpdate = ref(false)

// 获取全部路由
const getAllRoutes = () => {
  const fn = (arr, parentPath = '') => {
    for (const p of arr) {
      if (!p.hidden) {
        if (p.children && p.children.length) {
          fn(p.children, `${ parentPath }/${ p.path }`)
        } else if (p.meta?.title) {
          const path = `${ parentPath }/${ p.path }`
          metaTitle.value.push({
            path: path.replaceAll(/(\/){2,}/g, '/'),
            title: p.meta.title,
            icon: p.meta.icon,
          })
        }
      }
    }
  }

  fn(routerStore.sidebarRoutes)
}
// 未选路由
const metaTitleList = computed(() => {
  const titleList = metaTitleTop.value.reduce((pre, cur) => {
    pre.push(cur.title)
    return pre
  }, [])

  return metaTitle.value.filter(v => !titleList.includes(v.title))
})
const showEditApp = () => {
  dialogVisible.value = true
}

const jumpPath = (path) => {
  router.push(path)
}
// 获取已选
const getAppData = () => {
  queryByUserId({ userId: userStore.user.userId }).then(res => {
    if (res.data && res.data.id && res.data.pathList?.length) {
      appList.value = metaTitle.value.filter(item => res.data.pathList.includes(item.path))
      metaTitleTop.value = JSON.parse(JSON.stringify(appList.value))
      isUpdate.value = true
    }
  })
}
// 编辑确定，
const handleCase = () => {
  const pathList = []
  metaTitleTop.value.forEach(item => {
    pathList.push(item.path)
  })
  const pathParameter = {
    userId: userStore.user.userId, 
    pathList,
  }  
  const Fn = isUpdate.value ? updateByUserId : add
  metaLoading.value = true
  Fn(pathParameter).then(re => {
    isUpdate.value
      ? ElMessage.success('编辑成功')
      : ElMessage.success('新增成功')
  }).finally(() => {
    metaLoading.value = false
  })
  appList.value = [...metaTitleTop.value]
}
const toggleMeta = (meta) => {
  if (metaTitleTop.value.length > 8) {
    return ElMessage.error('最多添加9个')
  } 
  metaTitleTop.value.push(meta)
}
const handleSelect = (meta) => {
  metaTitleTop.value = metaTitleTop.value.filter(v => v.title != meta.title)
}
// 初始化
const init = () => {
  getAllRoutes()
  getAppData()
}
init()
</script>

<style lang="less" scoped>
.quiceApp {
      display: grid;
      // flex-wrap: wrap;
      // align-content: center;
      grid-template-columns:  1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      width: 100%;
      height: 100%;
      .quiceAppItem {
        font-size: 16px;
        cursor: pointer;
        // width: 33.3%;
        .quiceAppSingle {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-items: center;
          height: 60px;
          line-height: 30px;
          margin-top: 30px;
          svg[class^='svg-icon'] {
            width: 1.5em;
            height: 1.5em;
          }
        }
      }
    }
</style>
<style lang="less" scoped>
// 弹窗
/deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
    height: 100%
}
.metaCard {
    display: flex;
    flex-wrap: wrap;
    /deep/.metaItem {
        margin: 20px 0 0 35px;
        background-image: linear-gradient(to top, rgb(240, 248, 255) , #fff);
        span {
            font-size: 20px;
        }
        .el-card__body{
          padding: 0;
          line-height: 50PX;
        }
    }
    
}
.add {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.dialog-footer{
   text-align: right;
   padding-top: 12px;
}
</style>